<template>
  <view class="stats-section">
    <view class="stat-item">
      <text class="stat-number">{{ totalFriends }}</text>
      <text class="stat-label">总好友</text>
    </view>
    <view class="stat-item">
      <text class="stat-number">{{ onlineFriends }}</text>
      <text class="stat-label">在线好友</text>
    </view>
    <view class="stat-item">
      <text class="stat-number">{{ recentFriends }}</text>
      <text class="stat-label">最近联系</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FriendsStats',
  props: {
    totalFriends: {
      type: Number,
      default: 0
    },
    onlineFriends: {
      type: Number,
      default: 0
    },
    recentFriends: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped>
.stats-section {
  display: flex;
  justify-content: space-around;
  padding: 24rpx 20rpx;
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-number {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 22rpx;
  color: #999;
}
</style>

